<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="..\css\elementUi.css"/>
    <style>
        .el-form-item {
            margin-bottom: 7px;
        }

        .el-tabs__content {
            height: 500px;
        }

        .el-transfer-panel {
            width: 400px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="20">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <div>
                    <el-button type="primary" size="large" icon="search" @click="queryResouceType">检索</el-button>
                    <el-button type="primary" size="large" @click="saveResourceType('resourceTypeForm')">保存</el-button>
                    <el-button type="primary" size="large" @click="clearResourceType">清除</el-button>
                    <el-button type="primary" size="large" icon="delete" @click="deleteResourceType">删除</el-button>
                </div>
            </el-menu>
        </el-col>
        <el-col :span="4">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <span style="font-size: 2em;">资源类型维护</span>
            </el-menu>
        </el-col>
    </el-row>
    <el-form :inline="true" :model="resourceTypeForm" :rules="rules" ref="resourceTypeForm" label-suffix=":"
             style="padding:10px 20px 0px 10px;" label-width="240px" class="demo-form-inline">
        <div style="padding: 30px;">

            <el-row justify="center" type="flex" class="row-bg">
                <input type="hidden" id="resourceTypeHandleHidden" value=""/>
                <el-col :span="16">
                    <el-form-item label="资源类型" prop="resourceType">
                        <el-input placeholder=""
                                  icon="search"
                                  v-model="resourceTypeForm.resourceType"
                                  :on-icon-click="resourceTypeSearch"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 资源类型检索弹出框 -->
            <el-dialog title="资源" :visible.sync="resourceTypeDialog" top="5%">
                <el-table :data="selectTypeData" @row-dblclick="selectedRowType" border style="width: 100%"
                          height="600">
                    <el-table-column property="resourceType" label="类型" width="350"></el-table-column>
                    <el-table-column property="description" label="描述" width="400"></el-table-column>
                </el-table>
            </el-dialog>
        </div>

        <!--<p style="line-height:100%">-->
        <template>
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane label="主要信息" name="first">
                    <el-row type="flex" class="row-bg">
                        <el-col>
                            <el-form-item label="描述">
                                <el-input placeholder="" style="width: 850px;"
                                          v-model="resourceTypeForm.description"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" class="row-bg" justify="center" style="margin-top: 30px;">
                        <el-col :span="17">
                            <el-transfer
                                    v-model="selectedResData"
                                    :data="selResourceData"
                                    :titles="['可用资源', '已分配资源']">
                            </el-transfer>
                        </el-col>
                    </el-row>


                </el-tab-pane>
            </el-tabs>
        </template>

    </el-form>
</div>
</body>
<!-- 先引入 Vue -->
<script src="..\lib\vue.js"></script>
<!-- 引入组件库 -->
<script src="..\lib\elementUi.js"></script>
<script type="text/javascript" src="..\lib\mock.js"></script>
<script src="..\lib\axios.js"></script>
<script type="text/javascript" src="resourceType.js"></script>
<script type="text/javascript" src="..\lib\jquery-3.2.1.min.js"></script>
</html>